<script setup lang="ts">
import { useData } from 'vitepress';
import { onMounted, watch } from 'vue';

import AppHeader from '@/components/AppHeader.vue';

import { useCommon } from '@/stores/common';

const data = useData();
const commonStore = useCommon();
console.log(data);

watch(
  () => {
    return commonStore.theme;
  },
  (val) => {
    if (val === 'dark') {
      document.documentElement.classList.remove('light');
    } else if (val === 'light') {
      document.documentElement.classList.remove('dark');
    }
    document.documentElement.classList.add(val);
    localStorage.setItem('lookeng-theme', val);
  }
);

onMounted(() => {
  const theme = localStorage.getItem('lookeng-theme');
  if (theme) {
    commonStore.theme = theme;
  } else {
    const isDark =
      window.matchMedia &&
      window.matchMedia('(prefers-color-scheme: dark)').matches;

    const theme = isDark ? 'dark' : 'light';
    commonStore.theme = theme;
  }
});
</script>
<template>
  <header>
    <app-header></app-header>
  </header>
  <Content></Content>
</template>

<style lang="scss">
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
